<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>resume</title>

    <style type="text/css">
        body {
            background: #00D1FF;
            color: white;
        }

        .title {
            color: white;
            width: 100vw;
            height: 100vh;
            font-size: 100pt;
            font-family: "Arial";
            margin: 250px auto;
            text-align: center;
        }

        .content {
            position: relative;
        }

        .left {
            position: absolute;
            width: 40%;
            height: 100vh;
            left: 0;
        }

        .left > .user-info {
            position: relative;
            left: 50%;
            width: 200px;
            transform: translateX(-50%);

        }

        .content .right {
            position: absolute;
            right: 10px;
            width: 60%;
            background: azure;
            color: black;
        }

        .content-left-head {
            width: 200px;
            height: 200px;
        }

        .content-left-head > img {
            border: azure solid 10px;
            border-radius: 50%;
            width: 100px;
            height: 100px;
        }

        .name {
            width: 100px;
            height: 20px;
            text-align: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        ul li {
            list-style: none;
            margin-left: -10px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .description {
            position: relative;
            height: 40px;
        }

        .description > hr {
            position: absolute;
            height: 10px;
            width: 100%;
            vertical-align: center;
        }

        .study {
            position: absolute;
            left: 50%;
            width: 70px;
            background: white;
            vertical-align: center;
            transform: translateX(-50%);
        }

        /*
        content-section
        */

        ul li {
            list-style: none;
            display: flex;
            width: 100%;
            height: 100px;
            margin: 0px;
            padding: 0px;
        }

        .content-left {
            display: inline-block;
            width: 10%;
            height: 100%;
        }

        .content-left-child {
            display: inline-block;
            width: 180%;
            height: 100%;
            position: relative;
        }

        .line {
            display: inline-block;
            position: absolute;
            width: 4px;
            left: 30px;
            height: 100%;
            background: #ccc;
        }

        .dot {
            display: inline-block;
            position: absolute;
            top: 20px;
            left: 22px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: blue;
        }

        .content-right {
            display: inline-block;
            width: 80%;
            height: 100%;
        }

        dt,dd {
            margin-left: 20px;
        }

        .bottom {
            display: flex;
            align-items: center;
        }

        .bottom > div {
            display: inline-block;

        }

        .skill-line-left {
            width: 46%;
            height: 2px;
            background: #ccc;
        }

        .shill {
            margin: 0 10px;
        }

        .skill-line-right {
            width: 46%;
            width: 42%;
            height: 2px;
            background: #ccc;
        }
    </style>
</head>
<body>
<header>
    <H1 class="title">xsy的简历</H1>
</header>


<div class="content">
    <!--left -->
    <div class="left">
        <div class="user-info">
            <div class="content-left-head">
                <img src="https://raw.githubusercontent.com/xluos/ife/gh-pages/%E5%B0%8F%E8%96%87%E5%AD%A6%E9%99%A2/image/tx.jpg"
                     title="头像"/>
            </div>

            <div class="name">
                <span>Code</span>
            </div>
            <ul>
                <li>
                    15238281019
                </li>
                <li>
                    email@xluos.com
                </li>
                <li>
                    www.xluos.com
                </li>
                <li>
                    github.com/xluos
                </li>
            </ul>
        </div>
    </div>

    <!--right -->
    <div class="right">

        <div class="description">
            <hr/>
            <div class="study">
                学习经历
            </div>
        </div>
        <ul>
            <li>
                <div class="content-left">
                    <div class="content-left-child">
                        <div class="line">

                        </div>
                        <div class="dot">

                        </div>
                    </div>

                </div>
                <div class="content-right">
                    <dt>2015——2016</dt>
                    <dd>lalalal</dd>
                    <dd>buibuibuibuuibuibuibuibuibuibui</dd>
                </div>
            </li>
            <li>
                <div class="content-left">
                    <div class="content-left-child">
                        <div class="line">

                        </div>
                        <div class="dot">

                        </div>
                    </div>

                </div>
                <div class="content-right">
                    <dt>2015——2016</dt>
                    <dd>lalalal</dd>
                    <dd>buibuibuibuuibuibuibuibuibuibui</dd>
                </div>
            </li>
            <li>
                <div class="content-left">
                    <div class="content-left-child">
                        <div class="line">

                        </div>
                        <div class="dot">

                        </div>
                    </div>

                </div>
                <div class="content-right">
                    <dt>2015——2016</dt>
                    <dd>lalalal</dd>
                    <dd>buibuibuibuuibuibuibuibuibuibui</dd>
                </div>
            </li>
            <li>
                <div class="content-left">
                    <div class="content-left-child">
                        <div class="line">

                        </div>
                        <div class="dot">

                        </div>
                    </div>

                </div>
                <div class="content-right">
                    <dt>2015——2016</dt>
                    <dd>lalalal</dd>
                    <dd>buibuibuibuuibuibuibuibuibuibui</dd>
                </div>
            </li>
        </ul>
        <div class="bottom">
            <div class="skill-line-left">

            </div>
            <div class="shill">
                <span>掌握技能</span>
            </div>

            <div class="skill-line-right">
            </div>
        </div>


    </div>

</div>

</body>
</html>